import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import ListItem from '../../components/listItem'

import './index.less'

const mapState = ({ orderInfo }) => ({
  orderInfo
})

@connect(mapState)
class Order extends Taro.Component {
  config = {
    navigationBarTitleText: '订单详情'
  }

  render() {
    const { orderInfo } = this.props

    return (
      <View className="member-order-list page">
        <View className="item">
          {
            orderInfo.orderTypeId === 1
            ? <Image className="state" src={ require('../../assets/images/first_order.png') } />
            : <Image className="state" src={ require('../../assets/images/renew_order.png') } />
          }
          <View className="member">
            <Image src={ require('../../assets/images/member_icon.png') } />
            <View>
              <Text>{ orderInfo.productName }</Text>
              <Text>有效期：{ orderInfo.validityData }</Text>
              <Text>￥{ orderInfo.priceDiscount }</Text>
            </View>
          </View>
          <View className="line"></View>
          <View className="text">
            <Text>会员姓名</Text>
            <Text>{ orderInfo.name }</Text>
          </View>
          <View className="text">
            <Text>手机号</Text>
            <Text>{ orderInfo.mobile }</Text>
          </View>
          <View className="line"></View>
          <View className="text">
            <Text>下单方式</Text>
            <Text>{ orderInfo.channel }</Text>
          </View>
          <View className="text">
            <Text>订单编号</Text>
            <Text>{ orderInfo.outTradeNo }</Text>
          </View>
          <View className="text">
            <Text>下单时间</Text>
            <Text>{ orderInfo.orderTime }</Text>
          </View>
          <View className="line"></View>
          <View className="text">
            <Text>原价</Text>
            <Text>{ orderInfo.price }</Text>
          </View>
          <View className="text">
            <Text>折扣价</Text>
            <Text>{ orderInfo.priceDiscount }</Text>
          </View>
          <View className="text big" style={{ paddingBottom: '20Px' }}>
            <Text>实付款</Text>
            <Text>￥{ orderInfo.payAmount }</Text>
          </View>
        </View>
      </View>
    )
  }
}

export default Order